import { dom, _img } from './dom.js'
import { store } from '../store/index.js'
import svgIconPlay from '../assets/icon/svgIconPlay.svg'
import svgIconPrev from '../assets/icon/svgIconPrev.svg'

export const _playBar = (list, handleClick = () => { }) => {
    // let timer
    let len = list.length

    let goNext = () => {
        let current = store.currentPage
        let index = list.findIndex(t => t.name === current.name)

        let t = index + 1 >= len ? list[0] : list[index + 1]
        handleClick && handleClick(store.currentPage = t)


        // timer = setTimeout(goNext, 2000)
    }

    let goPrev = () => {
        let current = store.currentPage
        // if (force) return
        // timer && clearTimeout(timer)
        let index = list.findIndex(t => t.name === current.name)
        let t = index - 1 < 0 ? list[len - 1] : list[index - 1]
        handleClick && handleClick(store.currentPage = t)

        // timer = setTimeout(goPrev, 2000)
    }

    let handleToolbar = (e) => {
        let cls = e.target.className
        if (cls === 'next') {
            goNext()
        } else if (cls === 'prev') {
            goPrev()
        } else if (cls === 'stop') {
            // force = true
        }

    }

    let prev = _img(svgIconPrev, {
        class: 'prev',
        with: '25px',
        height: '25px'
    }, (e) => {
        handleToolbar(e)
    })

    let next = _img(svgIconPlay, {
        class: 'next',
        with: '25px',
        height: '25px'
    }, (e) => {
        handleToolbar(e)
    })


    let playBar = dom.div([prev, next], {
        class: 'toolbar'
    })

    return playBar
}